<template>
	<s-layout title="添加出行人">
		<view class="card">
			<view class="item">
				<text class="name">姓名</text>
				<input type="text" placeholder="请填写出行者姓名">
			</view>
			<view class="item">
				<text class="name">性别</text>
				<picker mode="selector" :range="state.gander" @change="setGander">
					<view v-if="state.gIndex!=-1">{{state.gander[state.gIndex]}} <text
							class="iconfont icon-xiangyou1"></text></view>
					<view class="sub" v-else>请选择性别 <text class="iconfont icon-xiangyou1"></text></view>
				</picker>
			</view>
			<view class="item">
				<text class="name">手机号码</text>
				<input type="text" placeholder="请填写出行者手机号码">
			</view>
			<view class="item">
				<text class="name">联系微信号</text>
				<input type="text" placeholder="请填写出行者联系微信号">
			</view>
			<view class="item">
				<text class="name">身份证号</text>
				<input type="text" placeholder="请填写出行者身份证号">
			</view>
			<view class="item">
				<text class="name">所在城市</text>
				<picker mode="region"  @change="setRegion" level='city'>
					<view v-if="state.city.length!=0">{{state.gander[state.gIndex]}} <text
							class="iconfont icon-xiangyou1"></text></view>
					<view class="sub" v-else>请选择所在城市 <text class="iconfont icon-xiangyou1"></text></view>
				</picker>
			</view>
			<view class="item cloumn">
				<view class="title">
					<text>出行车票</text>
					<text class="sub f20">(选填)</text>
				</view>
				<view class="list">
					<view class="iconfont icon-zhaoxiangji items" v-if="state.list.length<5"></view>
					<view class="items" v-for='(item,index) in state.list' :key="index" @tap='addList()'>
						<image src="@/static/data-empty.png" mode="aspectFill"></image>
						<text class="iconfont icon-chacha" @tap='setClose(index)'></text>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<view style="height: 80rpx;"></view>
			<button class="pos">确定</button>
		</view>
	</s-layout>
</template>

<script setup>
	import {reactive,computed} from 'vue';
	import {onLoad,onPageScroll} from '@dcloudio/uni-app';
	const state = reactive({
		gander: ['男', '女'],
		gIndex: -1,
		list: ['', '', '', ''],
		city:[]
	})
	const addList = ()=>{
		console.log(1)
	}
	const setGander = (e) => {
		state.gIndex = e.detail.value
	}
	const setRegion =(e)=>{
		state.city=e.detail.value
	}
	const setClose = (i) => {
		state.list.splice(i, 1)
	}
</script>

<style scoped lang="scss">
	.pos {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: var(--ui-BG-Main);
		color: #fff;
	}

	.card {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 40rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 60rpx;

			.name {
				&:before {
					content: "*";
					color: red;
					margin-right: 10rpx;
				}
			}

			input {
				text-align: right;
			}

			.icon-xiangyou1 {
				margin-left: 10rpx;
			}

		}

		.cloumn {
			flex-direction: column;
			align-items: left;
			justify-content: left;

			.title,
			.list {
				width: 100%
			}
		}
	}

	.sub {
		color: #888
	}

	.f20 {
		font-size: 20rpx;
		margin-left: 10rpx;
	}

	.list {
		margin-top: 30rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.icon-zhaoxiangji {
			line-height: 190rpx;
			text-align: center;
			background-color: #f6f6f6;
			font-size: 40rpx;
		}

		.items {
			margin: 10rpx;
			width: 190rpx;
			height: 190rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.icon-chacha {
				position: absolute;
				right: -15rpx;
				top: -15rpx;
				width: 30rpx;
				height: 30rpx;
				background-color: #ccc;
				color: #fff;
				border-radius: 50%;
				font-size: 14rpx;
				text-align: center;
				line-height: 30rpx;
			}
		}
	}
</style>